{if condition="get_system_value('site_editor') eq 'markdown'"}
{css href="__COMMON__/plugin/editor.md/css/editormd.css"}
{load href="__COMMON__/plugin/editor.md/editormd.min.js" /}

<!--markdown-->
<div id="markdown">
    {if condition="isset($item['content'])" }
    <textarea style="display:none;" name="content">{$item['content']}</textarea>
    {else /}
    <textarea style="display:none;" name="content"></textarea>
    {/if}
</div>
<script type="text/javascript">
    $(function () {
        var Editor = editormd("markdown", {
            width: "100%",
            height: 540,
            codeFold: true,
            htmlDecode: "style,script,iframe|on*",
            syncScrolling: "single",
            path: "__COMMON__/plugin/editor.md/lib/",
            emoji: false,
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp"],
            imageUploadURL: "{:url('main/uploadEditor')}",
        });
    });
</script>
{else /}
<!--ckeditor5-->
<div class="document-editor">
    <div class="toolbar-container"></div>
    <div class="content-container">
        <div style="height:800px" id="editor">
            {if condition="isset($item['content'])"}{$item['content']|raw} {/if}
        </div>
        <textarea id="content" style="display: none;"
                  name="content">{if condition="isset($item['content'])" }{$item['content']}{/if}</textarea>
    </div>
</div>
{load href="__PUBLIC__/js/ckeditor5/ckeditor.js,__PUBLIC__/js/ckeditor5/translations/zh-cn.js" /}
<script>
    DecoupledEditor
        .create(document.querySelector('#editor'), {
            language: 'zh-cn',
            ckfinder: {
                uploadUrl: "{:url('main/uploadCKEditor')}"
            }
        })
        .then(editor => {
            const toolbarContainer = document.querySelector('.document-editor .toolbar-container');
            toolbarContainer.prepend(editor.ui.view.toolbar.element);
            window.editor = editor;
        })
        .catch(err => {
            console.error(err.stack)
        });
    $('#editor').blur(function () {
        $('#content').val(window.editor.getData())
    })
</script>
{/if}